<template>
    <!--TODO 待写-->
    <div class="right-slide displayFlex">
        <div class="slide-wrap-positionA">
            <div class="slide-wrap-positionR">
                <div v-if="rtCommont && rtCommont.mediaContents && rtCommont.mediaContents.length > 0 && rtCommont.paginationType == 2"
                    class="right-slide-love store-swiper-type2">
                    <span class="swiper-pagination-bg" v-if="rtCommont.mediaType == 1">
                        <span class="now-swiper-index">{{rtCommont.nowSwiperIndex}}</span> / <span
                            class="total-index">{{rtCommont.mediaContents.length}}</span>
                    </span>
                    <span class="right-slide-wicon positionR" v-if="rtCommont.showBuyIcon">
                        <img class="right-slide-icon buy-icon" src="../../../assets/images/cart/buy_icon.png" alt="">
                        <span class="cart-number" v-if="cartGoodsLength">{{cartGoodsLength}}</span>
                        <span class="right-slide-click" @click="$emit('toCart',goodsDetailProps)"></span>
                    </span>
                    <span class="right-slide-wicon positionR" v-if="rtCommont.showBiggerIcon">
                        <img class="right-slide-icon" src="../../../assets/images/cart/bigger_icon.png" alt="">
                        <span class="right-slide-click" @click="$emit('isBigger',false)"></span>
                    </span>
                </div>
                <div class="slide-wrap">
                    <div v-if="rtCommont && rtCommont.mediaContents && rtCommont.mediaContents.length > 0 && rtCommont.mediaType == 1  && rtCommont.paginationType == 1"
                        class="right-slide-love store-swiper-wicon flex1 positionR">
                        <img class="right-slide-icon store-swiper-icon"
                            src="../../../assets/images/store/store_swiper_icon.png" alt="">
                        <span
                            class="swiper-pagination-img">{{rtCommont.nowSwiperIndex}}/{{rtCommont.mediaContents.length}}</span>
                    </div>
                    <!--直播的入口-->
                    <router-link v-if="rtCommont.directChannel
                                    && Object.keys(rtCommont.directChannel).includes('playState')
                                    && rtCommont.directChannel.playState == 1"
                        :to="{'path':'/store','query':{'storeId':rtCommont.belongStoreInfo.storeId}}"
                        class="right-slide-love neplayer-wrap">
                        <div class="positionR">
                            <span class="border-animation">
                                <span class="center-border positionAbCenter"></span>
                                <img class="right-slide-icon positionAbCenter" :src="rtCommont.belongStoreInfo.logo"
                                    alt="">
                            </span>
                            <span class="neplayer-text" v-if="rtCommont.directChannel.playState == 1">直播中</span>
                        </div>
                    </router-link>
                    <!--定位-->
                    <div class="right-slide-love location-wrap flex1 positionR"
                        v-if="rtCommont.isNeedLocation && rtCommont.dataInfo">
                        <img @click="toLocation(rtCommont)" class="right-slide-icon"
                            src="../../../assets/images/commonActModel/location_icon.png" alt="">
                        <!--                        <span class="swiper-pagination-img swiper-location " v-if="(rtCommont.longitude || rtCommont.latitude) && getDiscount(rtCommont.storeId)">{{getDiscount(rtCommont.storeId)}}</span>-->
                        <span class="swiper-pagination-img swiper-location "
                            v-if="currentUserStoreDiscount">{{currentUserStoreDiscount}}</span>
                    </div>
                    <!--点赞-->
                    <div class="right-slide-love flex1" @click="rtCollectLike"
                        v-if="rtCommont.isNeedLike && rtCommont.dataInfo">
                        <img class="right-slide-icon" v-if="!rtCommont.hadLiked"
                            src="../../../assets/images/commonActModel/right_side_love.png" alt="">
                        <img class="right-slide-icon" v-else
                            src="../../../assets/images/commonActModel/right_side_love_red.png" alt="">
                        <p class="right-num">{{rtCommont.dataInfo.likeNum}}</p>
                    </div>
                    <!--这里暂时不需要评论-->
                    <div class="right-slide-love flex1" v-if="rtCommont.isNeedComment">
                        <img class="right-slide-icon" @click="showCommentFn"
                            src="../../../assets/images/commonActModel/right_side_talk.png" alt="">
                        <p class="right-num">{{rtCommont.dataInfo.commentedNum}}</p>
                    </div>
                    <!--分享-->
                    <div class="right-slide-love flex1" @click="showShareFn"
                        v-if="rtCommont.isNeedShare  && rtCommont.dataInfo">
                        <img class="right-slide-icon" src="../../../assets/images/commonActModel/right_side_share.png"
                            alt="">
                        <p class="right-num">{{rtCommont.dataInfo.shareNum}}</p>
                    </div>
                    <!-- 客服 -->
                    <div class="right-slide-love flex1" v-if="rtCommont.isNeedServer && rtCommont.dataInfo">
                        <div class="customer-icon-box " @click="handleShow">
                            <div class="customer-icon" :class="{'active': customerList}">
                                <img class="right-slide-icon" src="../../../assets/images/store/service_icon.png"
                                    alt="">
                            </div>
                            <p class="right-num">客服</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition name="name" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <share v-if="showShare && rtCommont.isNeedContentShare" @clickFn="showShare = false"></share>
        </transition>
        <comment-list ref="commentListRef" v-if="showComment" :commentListProps="commentListProps"
            @closeComment="closeComment" @getSubCommentList="getSubCommentList" @deleteComment="deleteComment"
            @doComment="doComment" @isLike="isLike" @getUserMainComment="getUserMainComment"></comment-list>
        <!--:isCommentSuccess="isCommentSuccess"-->
    </div>
</template>

<script>
import XLocation from '../../../x/XLocation'
import { mapState, mapGetters } from 'vuex'
import XThirdLogin from "../../../x/XThirdLogin";
export default {
    name: "rgihtSilde",
    props: {
        rtCommontProps: {
            type: Object,
        },
        commentListProps: {
            type: Object,
        },
        discountList: Array,
        goodsDetailProps: Object
    },
    data () {
        return {
            rtCommont: {
                "dataInfo": {
                    "commentedNum": 0,
                    "visitNum": 0,
                    "shareNum": 0,
                    "likeNum": 0,
                },
                // "belongStoreInfo":{
                //     "storeId": 106,
                //     "name": "传世金玉",
                //     "logo": "https://ff.jpg",
                //     "concerned": false,                     //----是否关注
                //     "industry": "珠宝",                       //----所属行业
                //     "longitude": 22.564491271972656,
                //     "latitude": 114.0173568725586
                // },
                // "directChannel": {                      //----直播频道           //++20200324++
                //     "channelId": "b4e4fe63216b4a4ea9f967cede6592bf",            //----频道Id
                //     "name": "巴黎",                                             // ----频道名称
                //     "httpPullUrl": "http://d.live.126.net/live/ds",             // ----http拉流地址
                //     "hlsPullUrl": "http://g.live.126.net/live/fds",             //----hls拉流地址
                //     "rtmpPullUrl": "rtmp://a.live.126.net/live/ff",             //----rtmp拉流地址
                //     "playState": 0,                                             //----@直播播放状态 1.直播中，0 空闲，2.‘禁用’,3.直播录制"
                //     "chatRoomId": 164210270                                     //----聊天室ID
                // },
                "mediaId": 0,
                "latitude": 0,
                "longitude": 0,
                "mediaContents": [],
                "hadLiked": false,
                "storeId": 0,
                "mediaType": 1,
                "id": 0,
                "nowSwiperIndex": 1,
                "isNeedContentShare": true,
                "isNeedLocation": true,
                "isNeedLike": true,
                "isNeedComment": false,
                "isNeedShare": true,
                "isNeedServer": true,
                "showBiggerIcon": false,
                "showBuyIcon": false,
            },
            showShare: false,
            showComment: false,
            rightDiscountList: [],
            swiperIndex: 1,
            storeId: '',
        }
    },
    computed: {
        ...mapState({
            cartGoodsLength: state => state.api.cartObj.cartGoodsLength,
        }),
        ...mapGetters({
            currentUserStoreDiscount: 'currentUserStoreDiscountFn',
            currentStore: 'currentStoreFn',
            currentUser: 'currentUserFn',
            currentThird: 'currentThirdFn',
        }),
        customerList () {
            return this.$store.state.api.customerList
        }
    },
    async mounted () {
        this.rtCommont = Object.assign({}, this.rtCommont, this.rtCommontProps);
        this.rightDiscountList = this.discountList;

    },
    methods: {
        // 显示专属客服列表,没有就直接跳转
        handleShow () {
            // console.log(this.currentUser.userId, 'this.currentUser.userId');
            // console.log(this.currentThrird.thirdId, 'this.currentThrird.thirdId');
            let thirdId = this.currentThird && this.currentThird.thirdId ? this.currentThird.thirdId : 0;
            let userId = this.currentUser && this.currentUser.userId ? this.currentUser.userId : 0;
            if (!thirdId && !userId) {
                console.log('授权微信登录');
                if (this.v_is_weixin) {
                    XThirdLogin.toLogin();
                } else {
                    this.$router.push('/to/login');
                }
                return;
            }
            this.storeId = this.$route.query.storeId ? this.$route.query.storeId : this.rtCommont.storeId
            if (!(this.customerList && this.customerList.length > 0)) {
                let params = {
                    storeId: this.storeId,
                    userId,
                    thirdId,
                    enterType: '1',
                    enterTypeKey: '0'
                }
                this.$store.dispatch('getChatGroupIdApi', params).then((data) => {
                    if (data.success) {
                        this.$router.push(
                            {
                                path: '/im/chat',
                                query: { scene: 'team', chatGroupId: data.result, storeId: this.storeId }
                            }
                        )
                    }
                })
            } else {
                this.$store.commit('setShowCustomerList', true)
            }
        },
        /*对本页点赞*/
        rtCollectLike () {
            if (!this.userId) {
                this.$router.push('/to/login');
                return;
            }
            let that = this;
            let isLike;
            let temp;
            if (!this.rtCommont.hadLiked) {
                isLike = true;
                temp = {
                    hadLiked: true,
                };
                this.rtCommont.dataInfo.likeNum++;
            } else {
                isLike = false;
                temp = {
                    hadLiked: false,
                };
                this.rtCommont.dataInfo.likeNum--;
            }

            this.rtCommont = Object.assign({}, this.rtCommont, temp);
            this.$emit("isLike", { likeType: that.rtCommont.likeType || that.rtCommont.mediaType, likeKey: that.rtCommont.id, isLike: isLike });
        },
        toLocation () {
            if (!this.currentStore) {
                return
            }
            if ((this.currentStore.longitude || this.currentStore.latitude) && this.currentUserStoreDiscount) {
                this.$router.push({ path: '/location', query: { 'storeLongitude': this.currentStore.longitude, 'storeLatitude': this.currentStore.latitude } })
            } else {
                let userLocation = {};
                let isCanLocation = false;
                setTimeout(() => {
                    if (!isCanLocation) {
                        this.$root.$emit('toast', { msg: '获取位置信息失败' });
                    }
                }, 1000)
                XLocation.userGetHeSelfLocation();
                userLocation = XLocation.getUserLocation();
                isCanLocation = true;
                /*先定位，然后再获取用户的地理信息*/
                setTimeout(() => {
                    if ((userLocation.longitude || userLocation.latitude)) {
                        this.$router.push({ path: '/location', query: { 'storeLongitude': userLocation.longitude, 'storeLatitude': userLocation.latitude } })
                    } else {
                        this.$root.$emit('toast', { msg: '获取位置信息失败' });
                    }
                }, 600);
            }
        },
        getDiscount (storeId) {
            let that = this;
            if (this.rightDiscountList) {
                for (let value of that.rightDiscountList) {
                    if (value.storeId == storeId) {
                        return value.discount
                    }
                }
            }
        },
        showShareFn (boolean = true) {
            this.showShare = boolean;
            if (!this.rtCommont.isNeedContentShare) {
                this.$emit('showShare', boolean);
            }
        },
        isLike (obj) {
            if (!this.userId) {
                this.$router.push('/to/login');
                return;
            }
            this.$emit("isLike", obj);
        },
        showCommentFn () {
            if (!this.userId) {
                this.$router.push('/to/login');
                return;
            }
            this.showComment = true;
            this.$emit('getCommentList', { needLoading: true });
            this.$emit('isNotAutoplay', true);
            this.$emit('getUserMainComment', { commentKey: this.rtCommont.id });
            this.$emit("isShowHomeTap", false);
        },
        getUserMainComment (obj) {
            this.$emit('getUserMainComment', obj);
        },
        closeComment () {
            this.$emit('closeCommentCB');
            this.$emit("isNotAutoplay", false);
            this.showComment = false;
        },
        getSubCommentList (obj) {
            this.$emit('getSubCommentList', obj);
        },
        deleteComment () {

        },
        doComment (obj) {
            this.$emit('doComment', obj)
        },
        cancleLike () {
            let temp = {
                islike: false,
            };
            this.rtCommont = Object.assign({}, this.rtCommont, temp);
        }
    },
    components: {
        'share': () => import('../../commonComponents/share/Share'),
        "comment-list": () => import("../../commonComponents/bottomShow/CommentList"),
    },
    watch: {
        rtCommontProps (val) {
            this.rtCommont = Object.assign({}, this.rtCommont, val);
        },
        discountList (val) {
            this.rightDiscountList = val;
        },
    }
}
</script>

<style scoped lang="scss">
.right-slide {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    -webkit-flex-direction: column;
    flex-direction: column;
    z-index: 1050;
}

.right-slide /deep/ .comment {
    left: -3.75rem;
}

.right-slide-icon {
    display: block;
    width: 0.28rem;
    height: 0.28rem;
    object-fit: contain;
    pointer-events: auto;
}
.right-slide-wicon {
    margin-top: 0.24rem;
}
.right-slide-click {
    width: 0.6rem;
    height: 0.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.store-swiper-icon {
    width: 0.4rem;
    height: 0.4rem;
    position: relative;
    right: -0.075rem;
}

.right-num {
    color: #fff;
    font-size: 0.12rem;
    text-align: center;
    text-shadow: 0 0 0.01rem #ccc;
}

.swiper-pagination-img {
    white-space: nowrap;
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    position: absolute;
    text-align: center;
    color: #fff;
    top: 0;
    font-size: 0.1rem;
    right: -0.075rem;
}
.swiper-location {
    width: 0.5rem;
    top: 0.3rem;
    text-align: center;
    display: inline-block;
    position: absolute;
    margin: auto;
    height: 0.18rem;
    line-height: 0.18rem;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
}
.location-wrap {
    padding-bottom: 0.14rem;
}
.neplayer-wrap {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    top: -0.9rem;
    display: inline-block;
    .right-slide-icon {
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.25rem;
        animation: 1.4s neplayerIconSize infinite;
        transform-origin: center center;
    }
    .center-border {
        border-radius: 0.25rem;
        width: 100%;
        height: 100%;
        display: inline-block;
        border: 1px solid rgba(93, 137, 232, 1);
        transform-origin: center center;
        animation: 1.4s neplayerBorder infinite;
    }
    .border-animation {
        position: relative;
        width: 0.45rem;
        height: 0.45rem;
        border: 1px solid #5d89e8;
        border-radius: 0.25rem;
        display: inline-block;
    }
    .neplayer-text {
        display: inline-block;
        background-color: #5d89e8;
        border-radius: 0.25rem;
        color: #fff;
        font-size: 0.1rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.02rem 0.05rem;
        top: -0.2rem;
        white-space: nowrap;
    }
    @keyframes neplayerIconSize {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes neplayerBorder {
        0% {
            transform: scale(1);
            border-color: rgba(93, 137, 232, 1);
        }
        50% {
            transform: scale(1.3);
            border-color: rgba(93, 137, 232, 0);
        }
        100% {
            transform: scale(1);
            border-color: rgba(93, 137, 232, 1);
        }
    }
}

.slide-wrap {
    top: 40%;
    max-height: 2.4rem;
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 0.15rem;
    width: 0.28rem;
    flex-direction: row-reverse;
    .right-slide-love {
        max-height: 33%;
        min-height: 25%;
    }
    /*flex-wrap: wrap!important;*/
}

.store-swiper-type2 {
    position: absolute;
    right: 0.15rem;
    top: 1rem;
    display: flex;
    color: #fff;
    width: 0.28rem;
    flex-wrap: wrap;
}
.swiper-pagination-bg {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.25rem;
    padding: 0.03rem 0.06rem;
    background-color: rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.slide-wrap-positionA {
    position: absolute;
    left: 0;
    top: 0;
    height: 6.67rem;
    height: 100%;
    height: 100vh;
    z-index: 1;
}
.slide-wrap-positionR {
    height: 6.67rem;
    height: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.cart-number {
    position: absolute;
    display: inline-block;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.02rem 0.02rem;
    background-color: #ff4242;
    left: 0.15rem;
    transform: scale(0.7);
    top: -0.08rem;
    min-width: 0.15rem;
}
.animated.fadeOut {
    -webkit-animation-duration: 0;
    animation-duration: 0; // 动画执行时间
}
.animated.fadeIn {
    -webkit-animation-duration: 150ms;
    animation-duration: 150ms; // 动画执行时间
}
// 在线接待
.customer-icon-box {
    text-align: center;

    .active {
        background: #5d89e8;
    }
}
.customer-icon {
    width: 0.28rem;
    height: 0.28rem;
    // background: #5d89e8;
    border-radius: 50%;
    // text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 80%;
        height: 80%;
    }
}
</style>